<template>
  <div>
    <el-form ref="form" :model="form" label-width="85px">
      <el-form-item label="认证类型">
        <el-radio-group v-model="form.group_id">
          <el-radio :label="2">运动员</el-radio>
          <el-radio :label="3">摄影师</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.realname"></el-input>
      </el-form-item>
      <el-form-item label="所在地址">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="form.id_number"></el-input>
      </el-form-item>
      <el-form-item label="身份证上传">
        <div class="idCard">
          <el-upload
            :action="action"
            :on-success="handleSuccess1"
            accept="image/*"
            :headers="{
              token: token,
            }"
            :show-file-list="false"
          >
            <img
              v-if="form.id_photo_front"
              :src="form.id_photo_front"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="example">
            示例 <img src="@/assets/idcard1.png" alt="" />
          </div>
        </div>
        <div class="idCard">
          <el-upload
            :action="action"
            :on-success="handleSuccess2"
            accept="image/*"
            :headers="{
              token: token,
            }"
            :show-file-list="false"
          >
            <img
              v-if="form.id_photo_back"
              :src="form.id_photo_back"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="example">
            示例 <img src="@/assets/idcard2.png" alt="" />
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="checkBox">
          <el-checkbox v-model="checked"></el-checkbox
          >&nbsp;&nbsp;我已阅读并同意
          <span class="pointer" @click="open('service_inclusion_agreement')"
            >《平台入驻服务协议》</span
          >和
          <span class="pointer" @click="open('disclaimer')">《免责声明》</span>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="saveBtn pointer" @click="onSubmit">提交</div>
      </el-form-item>
    </el-form>
    <agreement ref="agreementRef" />
  </div>
</template>

<script>
export default {
  name: "NavBar",
  components: {
    agreement: () => import("./agreement.vue"),
  },
  data() {
    return {
      action: "",

      form: {
        group_id: 2,
        realname: "",
        address: "",
        id_number: "",
        id_photo_front: "",
        id_photo_back: "",
      },
      token: "",
      checked: true,
    };
  },
  mounted() {
    this.action = this.BASE_URL + "/common/upload";
    this.token = localStorage.getItem("token");
    // this.getUser();
  },
  methods: {
    getUser() {
      this.$post("/user/userinfo").then((res) => {
        this.info = res.data;
      });
    },
    onSubmit() {
      this.$post("/user/user_auth", this.form).then((res) => {
        if (res.code == 1) {
          this.$message.success("操作成功");
        }
      });
    },
    handleSuccess1(res, file) {
      this.form.id_photo_front = res.data.fullurl;
    },
    handleSuccess2(res, file) {
      this.form.id_photo_back = res.data.fullurl;
    },
    open(type) {
      this.$refs.agreementRef.open(type);
    },
  },
};
</script>

<style scoped lang="scss">
.idCard {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  :deep .el-upload {
    width: 250px;
    height: 158px;
    font-size: 50px;
    color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #dcdfe6;
  }
  .example {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    color: #999;
    img {
      width: 250px;
      margin-left: 20px;
      height: 158px;
    }
  }
}
.saveBtn {
  color: #fff;
  background: #917bbd;
  font-size: 22px;
  text-align: center;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  border-radius: 100px;
  line-height: 2;
}
.checkBox {
  margin-top: 20px;
  text-align: center;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    color: #917bbd;
  }
  :deep .el-checkbox__input.is-checked .el-checkbox__inner,
  :deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #917bbd;
    border-color: #917bbd;
  }
}
@media screen and (max-width: 768px) {
  .idCard {
    display: block;
  }
  .idCard .example {
    width: 100%;
  }
  :deep .idCard .el-upload {
    width: 225px;
    height: 130px;
    margin-bottom: 10px;
  }
  .idCard .example img {
    width: 225px;
    margin-left: 20px;
    height: 130px;
  }
}
</style>
